<template>
  <div class="category_box">
    <div class="cate_search">
      <el-button type="primary" size="small" @click="addCategoryFn">添加</el-button>
    </div>
    <div class="category_bottom">
      <el-table :data="tableData" border style="width: 100%" max-height="750">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="分类名称" prop="name"> </el-table-column>
        <el-table-column label="分类级别">
          <template slot-scope="scope">
            {{ scope.row.show_index == 0 ? "顶级分类" : "子分类" }}
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.img_url" alt="未找到图片" />
          </template>
        </el-table-column>
        <el-table-column label="是否显示"
          ><template slot-scope="scope">
            {{ scope.row.is_show ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort_order"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
import { getCategoryDataApi } from "../../request/api";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    getCategoryDataApi().then((res) => {
      console.log(res);
      this.tableData = res.data;
    });
  },
  methods:{
    addCategoryFn(){
      this.$router.push("/addcategory")
    }
  }
};
</script>
 
<style lang = "less" scoped>
.category_box {
  background-color: #fff;
  .cate_search {
    padding: 10px 10px 0;
  }
  .category_bottom {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    img {
      width: 80px;
      height: 40px;
    }
  }
}
</style>